<template>
  <view v-if="shenheStatus == 0" class="page">
    <u-sticky :h5-nav-height="0">
      <view class="menu">
        <view
          :class="['item', send_type == item.id ? 'active' : '']"
          v-for="item of statusList"
          :key="item.id"
          @click="handle('change', 'send_type', item.id)"
        >
          {{ item.title }}
        </view>
      </view>
      <view class="status">
        <view
          :class="['item', is_send == item.id ? 'active' : '']"
          v-for="item of typeList"
          :key="item.id"
          @click="handle('change', 'is_send', item.id)"
        >
          {{ item.title }}
        </view>
      </view>
    </u-sticky>

    <view class="list" v-if="list.length">
      <view class="item" v-for="item of list" :key="item.id">
        <view class="img">
          <image
            mode="aspectFill"
            :src="asyncImgs.store_m_admin.money"
            v-if="asyncImgs"
          ></image>
        </view>

        <view class="con">
          <view class="name">{{ getType(item.send_type) }}</view>
          <view class="des">{{ item.order_no }}</view>
          <view class="des">生成时间：{{ item.order_created_at }}</view>

          <view class="des" v-if="item.is_send == '1'"
            >到账时间：{{ item.send_time }}</view
          >
          <view class="des" v-else>预计到账时间：{{ item.pre_send_time }}</view>
        </view>

        <view class="rig">
          <view class="num">+{{ item.price_send }}</view>
          <view :class="['tag', item.is_send == '1' ? '' : 'active']">{{
            item.is_send == "1" ? "已返利" : "待返利"
          }}</view>
        </view>
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import { orderRebateSelfLog } from "../api/index";
import toolsMore from "@/components/tools/tools-more.vue";

export default {
  components: { Shenhe, toolsMore },
  data() {
    return {
      list: [],
      moreStatus: 1,
      page: 1,
      isEnd: false,
      send_type: "-1",
      is_send: "-1",

      statusList: [
        { id: "-1", title: "全部" },
        { id: "3", title: "余额" },
        { id: "2", title: "积分" },
        { id: "1", title: "佣金" }
      ],
      typeList: [
        { id: "-1", title: "全部" },
        { id: "0", title: "待返利" },
        { id: "1", title: "已返利" }
      ],
      total: null
    };
  },

  onLoad() {
    this.clearData();
  },

  computed: {
    getType() {
      return (params) => {
        switch (String(params)) {
          case "1":
            return "佣金返利";
          case "2":
            return "积分返利";
          case "3":
            return "余额返利";
          default:
            return "";
        }
      };
    }
  },

  methods: {
    handle(type, item, params) {
      switch (type) {
        case "change":
          this[item] = params;
          this.clearData();
          break;

        default:
          break;
      }
    },

    clearData() {
      this.page = 1;
      this.isEnd = false;
      this.list = [];
      this.getList();
    },

    async getList() {
      let { list: oldList, page, is_send, send_type } = this;
      this.moreStatus = 2;

      const res = await orderRebateSelfLog(
        {
          page,
          is_send,
          send_type
        },
        true
      );
      uni.stopPullDownRefresh();
      this.moreStatus = 1;

      if (res.code == 0) {
        this.total = res.total;
        let { list, totalCount } = res.data,
          count = parseInt(totalCount);
        if (list.length) {
          oldList.push(...list);
          this.page = page + 1;
        }
        if (oldList.length >= count) {
          this.isEnd = true;
          this.moreStatus = 3;
        }
      }
    }
  },
  onReachBottom() {
    if (this.isEnd) {
      return;
    }

    this.getList();
  },

  onPullDownRefresh() {
    this.getLocation();
  }
};
</script>

<style lang="scss" scoped>
.search {
  padding: 20rpx 24rpx;
  background: #fff;
}

.menu {
  display: flex;
  // padding: 0 12rpx;
  background: #fff;

  .item {
    position: relative;
    flex: 1;
    text-align: center;
    padding: 22rpx 0 24rpx;
    font-size: 28rpx;
    color: #262626;

    &.active {
      color: #f0250e;
      font-weight: bold;
    }

    &.active:after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 16%;
      margin-left: -20rpx;
      width: 40rpx;
      height: 6rpx;
      background: #f0250e;
    }
  }
}

.page {
  min-height: 100vh;
  background: #f2f2f2;
}

.list {
  padding: 24rpx 0;
  background: #fff;

  .item {
    position: relative;
    display: flex;
    padding: 30rpx 26rpx;
    font-size: 24rpx;

    &:after {
      content: "";
      position: absolute;
      left: 116rpx;
      bottom: 0;
      right: 0;
      height: 2rpx;
      background: #f8f8f8;
    }
  }

  .img {
    width: 70rpx;
    height: 70rpx;

    image {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 32px;
    }
  }

  .tag {
    color: #8c8c8c;
    &.active {
      color: #f0250e;
    }
  }

  .con {
    flex: 1;
    overflow: hidden;
    padding: 0 20rpx;
  }

  .rig {
    text-align: right;
  }

  .num {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }

  .name {
    padding-bottom: 10rpx;
    font-size: 28rpx;
    color: #262626;
  }

  .des {
    padding: 8rpx 0;
    color: #8c8c8c;
  }
}

.status {
  padding: 16rpx 24rpx;
  display: flex;
  background: #f2f2f2;

  .item {
    margin-right: 24rpx;
    padding: 10rpx 24rpx;
    border-radius: 32px;
    font-size: 24rpx;
    color: #262626;

    &.active {
      color: #f0250e;
      background: #ffe8e6;
    }
  }
}
</style>
